<template>
  <div class="dict-type-list">
      <div class="header">
        <span class="title">字典类型</span>
      </div>

      <div class="filter-bar" style="width: 80%; margin: 0 auto">
        <el-input v-model="query.type" placeholder="类型名称" clearable style="width: 200px;" />
        <el-button type="primary" @click="fetchData">查询</el-button>
        <el-button type="primary" @click="openDialog()" style="margin-left: auto;">新增</el-button>
      </div>

      <el-table
        :data="typeList"
        border
        stripe
        style="width: 80%; margin: 0 auto;"
        height="400px"
        v-loading="loading"
      >
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="type" label="类型名称" align="center"/>
        <el-table-column label="操作" width="160">
          <template #default="scope">
            <el-button size="mini" @click="openDialog(scope.row)">修改</el-button>
            <el-button size="mini" type="danger" @click="removeType(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页控件 -->
      <div style="text-align: center; margin-top: 20px;">
        <el-pagination
        background 
          @current-page="query.page"
          @page-size="query.limit"
          :page-sizes="[5, 8, 10]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

    

    <!-- 字典详情弹窗 -->
    <dict-detail-dialog
      :visible.sync="isDialogVisible"
      :dictType="currentType"
      :dictTypeId="currentTypeId"
      @refresh="fetchData"
      @closeDialog="isDialogVisible = false"
    />
  </div>
</template>

<script>
import DictDetailDialog from '@/components/DictDetailDialog.vue'

export default {
  name: 'DictTypeList',
  components: { DictDetailDialog },
  data() {
    return {
      query: { 
        type: '',
        page: 1, 
        limit: 10 },
      typeList: [],
      total: 0,
      loading: false,
      isDialogVisible: false,
      currentType: null,
      currentTypeId: 0
    }
  },
  methods: {
    handleSizeChange(size) {
      this.query.limit = size;
      this.query.page = 1; 
      this.fetchData();
    },
    
    /** 处理当前页码变化 */
    handleCurrentChange(page) {
      this.query.page = page;
      this.fetchData();
    },
    /** 查询字典类型 */
    async fetchData() {
      this.loading = true
      this.$http.get('/getAllDictType', await{ 
        params: { 
          type: this.query.type,
          page: this.query.page,
          limit: this.query.limit
        } }
      ).then(res => {
        if (res.data && res.status === 200) {
          this.typeList = res.data.records || [];
          this.total = res.data.total || 0;
        } else {
          this.$message.warning('未查询到数据')
          this.typeList = []
        }
      }).catch(() => {
        this.$message.error('查询失败，请检查网络或后端服务')
        this.typeList = [];
        this.total = 0;
      }).finally(() => {
        this.loading = false
      })
    },

    /** 打开弹窗（新增或修改） */
    openDialog(row) {
      this.currentTypeId = row ? row.id : 0
      this.currentType = row ? { ...row } : null
      this.isDialogVisible = true
    },

    /** 删除类型 */
    removeType(row) {
    this.$confirm('确认删除该字典类型吗？', '提示', { type: 'warning' })
        .then(async () => {
            const res = await this.$http.post('/deleteDictType', { id: row.id })
            if (res.status === 200 || res.data === true) {
              this.$message.success('删除成功')

              // 删除后如果当前页没有数据了，回到上一页
              if (this.typeList.length <= 1) {
                if (this.query.page > 1) {
                  this.query.page--;
                }
              }
              this.fetchData()
            } else {
              this.$message.warning(res.data.msg || '删除失败')
            }
        })
    }

  },
  mounted() {
    this.fetchData()
  }
}
</script>

<style scoped>
.dict-type-list {
  padding: 20px;
}
.header .title {
  font-size: 18px;
  font-weight: bold;
}
.filter-bar {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
</style>
